<template>
<view class="container font_08">

  <view class="tuiKuanContainer">
      <view class="tuikuanState">
          <view class="Title">申请状态</view>
          <view class="State">
              <block v-if="!orderDetailData.backAmount"> 
                <text :style="'color:' + setting.platformSetting.defaultColor">暂无</text>
              </block>
              <block v-else-if="orderDetailData.backAmount.backStatus  == 0"> 
                <text :style="'color:' + setting.platformSetting.defaultColor">暂无</text>
              </block>
              <block v-else-if="orderDetailData.backAmount.backStatus  == 1"> 
                <text :style="'color:' + setting.platformSetting.defaultColor">已提交申请</text>
              </block>
              <block v-else-if="orderDetailData.backAmount.backStatus  == 2"> 
                <text :style="'color:' + setting.platformSetting.defaultColor">申请已同意</text>
              </block>
              <block v-else-if="orderDetailData.backAmount.backStatus  == 3"> 
                <text :style="'color:' + setting.platformSetting.defaultColor">已退款</text>
              </block>
              <block v-else-if="orderDetailData.backAmount.backStatus  == 5"> 
                <text :style="'color:' + setting.platformSetting.defaultColor">申请被拒绝</text>
              </block>
          </view>
      </view>
      <view class="tuikuanReason">
        <text>退款总金额：</text>
        <text :style="'color:' + setting.platformSetting.defaultColor">{{orderDetailData.backAmount.backAmount}}</text>
      </view>
      <view v-if="orderDetailData.backAmount.backStatus  == 5" class="tuikuanReason">
        <text>申请被拒绝原因：</text>
        <text :style="'color:' + setting.platformSetting.defaultColor">{{orderDetailData.backAmount.adminRemark}}</text>
      </view>
      <view v-if="orderDetailData.backAmount.backStatus  == 2 || orderDetailData.backAmount.backStatus  == 3" class="tuikuanReason">
        <text>退货物流名称：</text>
        <text :style="'color:' + setting.platformSetting.defaultColor">{{orderDetailData.backAmount.backGoodsWuliuCom}}</text>
      </view>
      <view v-if="orderDetailData.backAmount.backStatus  == 2 || orderDetailData.backAmount.backStatus  == 3" class="tuikuanReason">
        <text>退货物流单号：</text>
        <text :style="'color:' + setting.platformSetting.defaultColor">{{orderDetailData.backAmount.backGoodsWuliuNo}}</text>
      </view>
      <view v-if="orderDetailData.backAmount.backStatus  == 2 || orderDetailData.backAmount.backStatus  == 3" class="tuikuanReason">
        <text>退货运费：</text>
        <text :style="'color:' + setting.platformSetting.defaultColor">{{orderDetailData.backAmount.backGoodsWuliuAmount}}</text>
      </view>
      <view class="tuikuanReason">
        <text>申请退款理由：</text>
        <text class="tip_tags" v-if="orderDetailData.backAmount.tags">{{orderDetailData.backAmount.tags}}</text>
        <text :style="'color:' + setting.platformSetting.defaultColor">{{orderDetailData.backAmount.userRemark}}</text>
      </view>
      
      


      <view class="tuikuanReasonImage">
        <image v-for="(item, index) in orderDetailData.backAmount.backImageList" :key="index" :data-url="item" :data-urls="orderDetailData.backAmount.backImageList" @tap="lookBigImage" :src="item"></image>
      </view>
  </view>

  <view class="orderSateContainer ">
    <view class="oooo ">
      <image mode="aspectFill" src="https://image1.sansancloud.com/xianhua/2020_4/8/10/45/30_55.jpg?x-oss-process=style/preview_120"></image>
      <view class="oooo_view font5"> 
        <text class>订单号: {{orderDetailData.orderNo}}</text>
        <text>订单金额: {{orderDetailData.goodsAmount}}</text>
        <block v-if="orderDetailData.payType == 3"> <text>支付方式: 微信支付</text>  </block>
        <block v-if="orderDetailData.payStatus == 0"> <text>支付状态: 未支付</text>  </block>
        <block v-if="orderDetailData.payStatus == 1"> <text>支付状态: 已支付</text>  </block>
        <block v-if="orderDetailData.payStatus == 2"> <text>支付状态: 已退款</text>  </block>
      </view>
    </view> 
  </view>
    


  <view class="orderKuaidi" v-if="orderDetailData.orderStatus > 3 && orderDetailData.orderStatus == 7">
      <view> 
         <text>快递名：</text> 
         <text :style="'color:' + setting.platformSetting.defaultColor">{{orderDetailData.kuaidiName}}</text> 
      </view>
      <view class="orderKuaidi_no">
        <text>快递单号：</text> <text :style="'color:' + setting.platformSetting.defaultColor">{{orderDetailData.invoiceNo}}</text>
      </view>
      
  </view>

  <view class="userInfo" v-if="orderDetailData.backAmount">
    <image :src="orderDetailData.backAmount.platformUserIcon"></image>
    <text>{{orderDetailData.backAmount.platformUserName  }}</text>
  </view>
  <view class="addrItems2">
      <image mode="aspectFill" src="https://image1.sansancloud.com/xianhua/2019_12/12/13/49/30_402.jpg?x-oss-process=style/preview_120"></image>
      <view class="addrInfo">
        <view>
          <text>{{orderDetailData.buyerName}}</text>
          <text class="marginleft">{{orderDetailData.buyerTelno}}</text>
        </view>
        <text class="font2">{{orderDetailData.buyerProvince}} {{orderDetailData.buyerCity}} {{orderDetailData.buyerArea}} {{orderDetailData.buyerAddress}}</text>
      </view>
  </view>

  <view class="cartContainer">
    <view class="cartShopName">
      <text>{{orderDetailData.belongShopName}}</text>
      <text class="color" :style="'color:' + setting.platformSetting.defaultColor">合计:￥ {{orderDetailData.goodsAmount}}</text>
    </view>
    <view class="cartItems">
      <view class="itemCheckbox">
        <image mode="aspectFill" :src="orderDetailData.itemIcon"></image>
      </view>
      <view class="item_infomation">
        <view class="item_infomation_name">{{orderDetailData.itemName}}</view>
        <view class="item_infomation_name" v-if="!!orderDetailData.measureCartesianId">{{orderDetailData.measures}}</view>
        <view class="item_infomation_nums"> 
          <text class="flexCenter">x {{orderDetailData.itemCount}}</text>
        </view>
        <view class="item_infomation_money" :style="'color:' + setting.platformSetting.defaultColor">单价:￥ {{orderDetailData.itemPrice}}</view>
      </view>
    </view>
    <!-- <view class='butn_container2'>
      <text>留言</text>
      <text class='Input'>{{orderDetailData.buyerScript}}</text>
    </view> -->
  </view>

  <view class="orderTime">
    <text>订单生成时间: {{orderDetailData.addTime}}</text>
    <text>订单支付时间: {{orderDetailData.payTime}}</text>
    <text>订单送货时间: {{orderDetailData.confirmTime }}</text>

  </view>

  <view class="tuikuan_time_coontainer">
    <view class="tuikuan_time">
      <text>申请售后时间：</text>
      <text>{{orderDetailData.backAmount.requestTime}}</text>
    </view>
    <view class="tuikuan_time">
      <text>答复申请时间：</text>
      <text>{{orderDetailData.backAmount.confirmTime}}</text>
    </view>
    <view class="tuikuan_time">
      <text>退款到账时间：</text>
      <text>{{orderDetailData.backAmount.backTime}}</text>
    </view>
  </view>

  
</view>
</template>

<script>

export default {
  data() {
    return {
      setting: null,
      loginUser: null,
      orderNo: null,
      orderDetailData: null
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (option) {
    var that = this;
    this.setData({
      setting: getApp().globalData.setting,
      loginUser: getApp().globalData.loginUser
    });
    console.log(option);
    that.getOrderDetail(option.orderItemId);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},
  methods: {
    dellBackImage: function (imageList) {
      let returnList = [];

      for (let i = 0; i < imageList.length; i++) {
        returnList.push(imageList[i].imagePath);
      }

      return returnList;
    },
    lookBigImage: function (e) {
      let url = e.currentTarget.dataset.url;
      let urls = e.currentTarget.dataset.urls;
      getApp().globalData.lookBigImage(url, urls);
    },
    getOrderDetail: function (orderItemId) {
      let that = this;
      let getParams = {};
      getParams.orderItemId = orderItemId;
      let customIndex = getApp().globalData.AddClientUrl("/get_order_product_comment_page_partial.html", getParams); // wx.showLoading({
      //   title: 'loading'
      // })

      getApp().globalData.showToastLoading('loading', true);
      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          console.log('-----------orderDetail--------');
          console.log(res.data);

          if (res.data.id) {
            if (res.data.backAmount && res.data.backAmount.backImageJson) {
              let imageList = res.data.backAmount.backImageJson;
              imageList = JSON.parse(imageList);
              res.data.backAmount.backImageList = that.dellBackImage(imageList);
            }

            that.setData({
              orderDetailData: res.data
            });
          }

          wx.hideLoading();
        },
        fail: function (res) {
          wx.hideLoading();
          getApp().globalData.loadFail();
        }
      });
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
@import "./index.css";
</style>